<template>
    <div class="assy">    
		  <vue3-seamless-scroll  :hover="true" :hover-stop="true" :list="arrList" :step="0" class="seamless-warp" :copyNum="0">
		    <SliderGroup :list="arrList" titlePosition="up" :titleStyle="{ height: '20px', lineHeight: '20px' }"
		      :valueStyle="{ width: 'auto' }" valuePosition="up" :disabled="true" itemMaring="0 auto" />
		  </vue3-seamless-scroll>      
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import SliderGroup from '@/components/SliderGroup'
import { getProjectType } from '@/api/buildHouse.js';

const tableData = ref([]);
const arrList = ref([]);

const getData = () => {
	/*1表示新建*/
	getProjectType("1").then((res) => {
		//console.log(res.data)

    arrList.value = res.data.map(item => {
      return {
        title: item.typeName,
        num: item.num,
        value: Number(item.num),
        valueInfo: `${item.num}%`
      }
    })
//  console.log(arrList.value)
  });
}


// 挂载完成
onMounted(() => {
	getData();
})
</script>
<style lang='scss' scoped>
.assy{
	width: 430px;
  height: 300px !important;
  overflow: hidden;
  margin: -30px auto 0;
    color: #fff;
    position: static!important;

   	:deep(.el-table) {
    	background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
    	
			opacity: 0.85;
		}
		:deep(.el-table th.el-table__cell){
			font-size: 16px;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #E6F4FD;
			background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
			border-bottom: 1px solid #475ADB;
		}
		:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
	    background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%)!important;
		}
}
.seamless-warp {
	margin-top: 5px;
  height: calc(100%);
  overflow-y: auto;

  :deep(.slider-group-item) {

    .el-slider {
      width: 100%;
      margin: 0;

      .el-slider__runway {
        height: 10px;
        background: #000000;
				border:none;
        .el-slider__bar {
          height: 10px;
					background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
					border-radius: 5px 5px 5px 5px;
          background-position: center;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          margin-left: 0;
          margin-right: 0;
        }

        .el-slider__button-wrapper {
          color: red;
          margin-left: -13px;

          .el-slider__button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-position: center;
            width: 13px;
						height: 13px;
						background: #E9FFFF;
						box-shadow: 0px 0px 14px 1px #46FFFF;
						border-radius: 13px;
						border: 2px solid #46FFFF;
          }
        }
      }
    }
  }
}
</style>